<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"/>

	<script src="{% static 'js/echarts.min.js' %}"></script>
	<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'layer/layer.js' %}"></script>

    <title>个人信息</title>
</head>


<body>
   <header>
    <div class="lf">
        <a class="home" href="{% url 'index' %}">系统首页</a>
        {% if user.is_authenticated %}
            <a href="{% url 'res:upload_res' %}">上传资料</a>
        {% endif %}
    </div>
    <div id="search">
        <input type="text" name="name"
               placeholder="请输入要搜索的资源" autocomplete="off"/><a class="search btn">搜索</a>
    </div>

    <div class="rf">

        {% if user.is_authenticated %}
            <div class="email-info">
                <b>99</b>
                <ul class="email-list">
                    <li><a href="./message.html">官方<b>0</b></a></li>
                    <li><a href="./message.html">通知<b>0</b></a></li>
                    <li><a href="./message.html">私信<b>0</b></a></li>
                </ul>
            </div>
        {% endif %}

        {% if user.is_authenticated %}
            <a class="info" href="{% url 'user:personal' %}">个人中心</a>
            <a class="cols" href="{% url 'res:collect_list' %}">收藏</a>
            <a class="exit" href="{% url 'logout' %}">退出登录</a>
        {% endif %}

        {% if user.is_anonymous %}
            <a href="{% url 'login' %}">登录/注册</a>
        {% endif %}

    </div>
</header>
	
	    <!-- 充值窗口 -->
    <div class="cvs" id="cvs2_logon" style="display:none">

        <div class="newModWin zfb-win">
            <section class="clearfix">
                <div class="title">支付宝快速充值兑换积分</div>
                <!-- 关闭弹出层 -->
                <div class="close" id="cvs2-close"></div>
            </section>

            <div class="zfb">
                <div class="clearfix">
                    <input type="number" name="money" placeholder="请输入充值金额,单位元"/>
                    <input type="button" class="zfb-btn" value="充值"/>
                </div>
                <b>充值比例：1元=10积分</b>
            </div>
        </div>
    </div>
	<article id="test">
		<!-- 网站主体 -->
		 <div id="main" class="clearfix">
        <!-- 定义右侧窗口信息 -->
        <section class="aside">
            <aside class="users">
                <div class="pu">
                    <p class="photo">
                        <span class="lf">个人头像</span>
                        <img class="rf" src="{{ info.avtar.url }}"/>
                        <!-- 单击头像，修改用户头像 -->
                        <input type="file" name="" accept="image/png,image/jpeg,image/jpg,image/gif">
                    </p>

                    <p class="tel disable">
                        <span class="lf">手机号码</span>
                        <span class="rf">{{ info.user.username }}</span>
                    </p>

                    <p class="nickname">
                        <span class="lf">昵称</span>
                        <span class="rf">{{ info.nickname }}</span>

                    </p>

                    <p class="sex">
                        <span class="lf">性别</span>

                        <span class="rf">{{ info.get_gender_display }}</span>

                    </p>

                    <p class="email">
                        <span class="lf">邮箱</span>
                        <span class="rf">{{ info.user.email }}</span>
                    </p>
                    <a href="{% url 'findpass' %}">
                        <p class="password">
                            <span class="lf">密码</span>
                        </p>
                    </a>
                </div>

            </aside>

            <!-- 修改 昵称的 窗口 -->
            <aside class="modify-win nickname">
                <div class="title"><i></i>修改-昵称</div>
                <div class="content">
                    <input type="text" name=""  v-model="nickname">
                    <button @click="modify_nickname">确定修改</button>
                </div>
            </aside>
            <!-- 修改 性别的 窗口 -->
            <aside class="modify-win sex">
                <div class="title"><i></i>修改-性别</div>
                <div class="content" >
                    <input type="radio" name="sex" value="M" v-model="sex" checked id="c-sex-m"><label for="c-sex-m">男</label>
                    <input type="radio" name="sex" value="F" v-model="sex" id="c-sex-f"><label for="c-sex-f">女</label>
                    <input type="radio" name="sex" value="S" v-model="sex" id="c-sex-s"><label for="c-sex-s">保密</label>
                    <button @click="modify_sex">确定修改</button>
                </div>
            </aside>
            <!-- 修改 邮箱的 窗口 -->
            <aside class="modify-win email">
                <div class="title"><i></i>修改-邮箱</div>
                <div class="content">
                    <input type="text" name="" value="" v-model="oldEmail">
                    <input type="text" name="" value="" placeholder="请输入新的邮箱">
                    <button>确定修改</button>
                </div>
            </aside>

            <!-- 关注数 -->
            <aside class="psl">
                <a class="focus-on"
                   href="{% url 'user:attention' %}">关注数:<b>{{ fans_attach.attach|floatformat:0 }}</b></a>
                <a class="fan">粉丝数:<b>{{ fans_attach.fans|floatformat:0 }}</b></a>
            </aside>

            <aside class="info">
                <h1>
                    <a>用户积分:<b class="so"></b></a>
                    <a class="zfb-cz-btn" onclick="$('#cvs2_logon').show();">支付宝积分充值</a>
                </h1>
                <!-- 图表形式显示积分  -->
                <div id="user-score-mark" class="u-mark"></div>
            </aside>
        </section>


        <section id="score_detail">
            <h1 class="detail-score">积分明细</h1>
            <ul class="person-info">
                <li>
                    <strong class="c1">资源名称</strong>
                    <strong class="c2">积分变动</strong>
                    <strong class="c3">原因</strong>
                    <strong class="c4">时间</strong>
                </li>

                 <li v-if="scoreList.length===0">
                    <a>暂无数据</a>
                </li>

                    <li v-for="item in scoreList" :key="item.id">

                        <a class="c1 link" v-if="item.resource_name" :href="'/res/detail/'+item.res_id"
                         v-text="item.resource_name" ></a>

                        <a class="c1" v-else>无资源</a>

                        <span class="c2">#{item.score}</span>
                        <span class="c3"> - #{item.remark}</span>
                        <span class="c4">#{formatDate(item.create_time)}</span>
                    </li>




            </ul>

            <!-- 分页 -->
            <Paginator v-model:page="page" :total-pages="totalPages"></Paginator>

        </section>

    </div>

	</article>
	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>

{% include 'public/PaginationTemplate.html' %}

	<script>

	     Vue.createApp({
            data() {
                return {
                    scoreList:[],//资源列
                    page:1,//设置页码
                    row:10,//每页显示条数
                    totalPages :0, //总页码
                    nickname:"{{ info.nickname }}", //昵称
                    sex:"{{ info.gender }}", //性别

                    oldEmail:"{{ info.user.email }}", //原邮箱
                    newEmail:"", //新邮箱

                }

            },
            created() {
                this.getScoreList()

            },
            delimiters:["#{","}"],
            methods:{
                getScoreList(){

                    axios.get("/user/score_list/",{
                        params:{
                            page:this.page,
                            row:this.row
                        }
                    }).then(res=>{
                        if(res.data.code===200){
                            this.scoreList=res.data.list
                            this.totalPages=res.data.pages

                        }
                        else{
                            layer.msg(res.data.msg,{icon:5})

                        }
                    })

                },
                formatDate(dataStr){
                    return dataStr.replace("T"," ").replace(/\.\d+$/,"")
                },

                modify_nickname(){

                    //修改 昵称
                    if(!this.nickname){
                        layer.msg("请输入昵称",{icon:5})
                        return false
                    }
                    axios.post("/user/modify_nickname/",{nickname:this.nickname},
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                        .then(res=>{
                            if(res.data.code===200){

                                layer.msg(res.data.msg, {icon: 6})
                                //刷新页面
                                location.reload()

                            }else{
                                layer.msg(res.data.msg, {icon: 5})
                            }
                           })
                },
                modify_sex(){

                    //修改 性别
                    axios.post("/user/modify_sex/",{sex:this.sex},
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                    .then(res=>{
                            if(res.data.code===200){

                                layer.msg(res.data.msg, {icon: 6})
                                //刷新页面
                                location.reload()

                            }else{
                                layer.msg(res.data.msg, {icon: 5})
                            }
                           })

                }


            },
            components:{
                //注册组件
                Paginator,
            }
        }).mount("#test")



    $(function() {
    // 修改个人信息
    $(".users .pu").on("click", ".nickname, .sex, .email" , function(event){
    $(this).parents(".users").slideUp();
    let cls = this.className ;
    $(`.modify-win.${cls}`).slideDown()
    })
    // 取消修改信息效果
    $(".modify-win i").on("click", function(event){
    console.log($(this).parents(".modify-win"))
    $(this).parents(".modify-win").slideUp()
    $("aside.users").slideDown()
    })

    const data={{ user_score|safe }};
    const total_score=data.reduce((total,item)=>total+parseInt(item.value),0)
    $(".so").text(total_score)

    var option = {
    title: {
    text: '用户积分信息-积分统计',
    left: 'center'
    },
    tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
    top: 'bottom',
    data: ['支付宝充值', '用户注册', '上传资源', '评论资源', '下载资源']
    },
    series: [
    {
    name: '积分来源',
    type: 'pie',
    radius: '50%',
    center: ['40%', '45%'],
    data: data.map(item=>({name:item.name,value:Math.abs(item.value)})),
    emphasis: {
    itemStyle: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    }
    }
    ]
    };

    echarts.init($("#user-score-mark").get(0)).setOption(option);

    })
		

</script>
</body>

</html>